<template>
	<view class="QS-Line" :class="getClass" :style="getStyle"></view>
</template>

<script>
	import QSComponentMixin from '../../mixins/QS-Components-Mixin.js';
	const componentType = 'QS-Line';
	const QSComponentMixinRes = QSComponentMixin({ componentType: componentType });
	export default {
		mixins: [
			QSComponentMixinRes.mixin
		],
		props: {
			// #ifdef MP-ALIPAY
			...QSComponentMixinRes.props,
			// #endif
			direction: {
				type: String,
				default: 'row'
			},
			color: {
				type: String,
				default: '#000000'
			},
			width: {
				type: String,
				default: '1px'
			},
			lineStyle: {
				type: String,
				default: 'solid'
			},
			length: {
				type: String,
				default: ''
			}
		},
		computed: {
			QS_nCompStyle() {
				const obj = {};
				obj.borderColor = this.color;
				if(this.direction == 'row') {
					obj.borderBottomWidth = this.width;
					obj.borderBottomStyle = this.lineStyle;
					if(this.length) obj.width = this.length;
				}else{
					obj.borderLeftWidth = this.width;
					obj.borderLeftStyle = this.lineStyle;
					if(this.length) obj.height = this.length;
				}
				return obj;
			}
		}
	}
</script>

<style scoped>
	.QS-Line{
		vertical-align: middle;
	}
</style>
